<template>
  <div>
    <el-card>
      <div class="top">
        <el-row>
          <p style="font-size: 18px">课程管理</p>
          <!-- <el-button size="small" class="button1 el-icon-delete" type="warning">
            删除</el-button
          > -->
          <el-button
            size="small"
            style="height: 30px; margin-top: 12px"
            class="button1 el-icon-folder-add"
            type="warning"
            @click="dialogFormVisible = true"
          >
            添加课程</el-button
          >
          <el-input
            style="width: 250px; margin-left: 30px"
            placeholder="请输入内容"
            class="input-with-select"
            v-model="queryinfo.name"
          >
            <template #append>
              <el-button icon="el-icon-search" @click="courselist"></el-button>
            </template>
          </el-input>
        </el-row>
      </div>
    </el-card>
    <el-card>
      <div class="box">
        <!-- 列表 -->
        <el-table
          ref="multipleTable"
          :data="course"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <!-- @selection-change="handleSelectionChange" -->
          <el-table-column type="selection" width="100"> </el-table-column>
          <div class="el-icon-heavy-rain"></div>

          <el-table-column prop="name" label="课程姓名" width="200">
          </el-table-column>
          <el-table-column prop="pricetype" label="收费模式" width="200">
          </el-table-column>
          <el-table-column prop="price" label="单价" width="200">
          </el-table-column>
          <el-table-column prop="mode" label="上课模式" width="200">
          </el-table-column>
          <el-table-column prop="" label="操作" show-overflow-tooltip>
            <template #default="scope">
              <el-button size="mini" @click="courseedit(scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="coursedel(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 列表 -->
        <!-- 分页 -->
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryinfo.page"
            :page-sizes="[3,8,12]"
            :page-size="queryinfo.psize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
        <!-- 分页 -->
      </div>
    </el-card>
    <!-- 添加 -->
    <el-dialog title="添加课程" width="40%" v-model="dialogFormVisible">
      <div style="margin: 10px"></div>
      <el-form
        label-width="80px"
        :model="courseform"
        :rules="rules"
        ref="inserform"
      >
        <el-form-item label="课程名称" prop="name">
          <el-input style="width: 300px" v-model="courseform.name"></el-input>
        </el-form-item>
        <el-form-item label="收费模式" prop="pricetype">
          <el-radio-group v-model="courseform.pricetype">
            <el-radio label="按课时收费" checked></el-radio>
            <el-radio label="按期收费"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="单价" prop="price">
          <el-input style="width: 300px" v-model="courseform.price"></el-input>
          元/课时
        </el-form-item>
        <el-form-item label="上课模式" prop="mode">
          <el-radio-group v-model="courseform.mode">
            <el-radio label="一对一"></el-radio>
            <el-radio label="集体班"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="courseadd('inserform')"
            >确 定</el-button
          >
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 添加 -->
    <!-- 修改 -->
    <el-dialog title="修改课程" width="40%" v-model="dialogFormVisiblea">
      <div style="margin: 10px"></div>
      <el-form
        label-width="80px"
        :model="editform"
        :rules="rules"
        ref="inserform"
      >
        <el-form-item label="课程名称" prop="name">
          <el-input style="width: 300px" v-model="editform.name"></el-input>
        </el-form-item>
        <el-form-item label="收费模式" prop="pricetype">
          <el-radio-group v-model="editform.pricetype">
            <el-radio label="按课时收费" checked></el-radio>
            <el-radio label="按期收费"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="单价" prop="price">
          <el-input style="width: 300px" v-model="editform.price"></el-input>
          元/课时
        </el-form-item>
        <el-form-item label="上课模式" prop="mode">
          <el-radio-group v-model="editform.mode">
            <el-radio label="一对一"></el-radio>
            <el-radio label="集体班"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="edit('inserform')"
            >确 定</el-button
          >
          <el-button @click="dialogFormVisiblea = false">取 消</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 修改 -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      dialogFormVisiblea: false,
      course: [],
      total:0,
      queryinfo: {
        psize: 8,
        page: 1,
        name: "",
      },
      courseform: {
        name: "",
        pricetype: "",
        price: "",
        mode: "",
      },
      editform: {
        id: "",
        name: "",
        pricetype: "",
        price: "",
        mode: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入课程名称", trigger: "blur" },
          { min: 3, max: 6, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        pricetype: [
          { required: true, message: "请选择收费模式", trigger: "blur" },
        ],
        price: [
          { required: true, message: "请输入单价", trigger: "blur" },
          { min: 3, max: 6, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        mode: [{ required: true, message: "请选择上课模式", trigger: "blur" }],
      },
    };
  },
  created() {
    this.courselist();
  },
  methods: {
    // 课程列表
    async courselist() {
      // console.log(123);
      const { data: res } = await this.$http.get(
        "http://www.eshareedu.cn/edusystems/api/courses/list",
        { params: this.queryinfo }
      );
      console.log(res);
      if (res.errCode == "10000") {
        this.course = res.data.list;
        this.total = res.data.counts;
      } else {
        this.$message.error("请求课程数据失败");
      }
    },
    // 课程列表
    // 课程添加
    async courseadd() {
      const { data: res } = await this.$http.post(
        "http://www.eshareedu.cn/edusystems/api/courses/add",
        this.courseform
      );
      if (res.errCode == "10000") {
        this.$message.success("添加成功");
        this.courselist();
        this.dialogFormVisible = false;
      } else {
        this.$message.error("添加失败");
      }
    },
    // 课程添加
    // 分页
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.queryinfo.psize = val;
      this.courselist();
    },
    handleCurrentChange(val) {
      this.queryinfo.page = val;
      this.courselist();
      // console.log(`当前页: ${val}`);
    },
    // 分页结束
    //删除课程
    async coursedel(id) {
      // console.log(id);
      const result = await this.$confirm("此操作将永久删除该记录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch((error) => {
        return error;
      });
      if (result == "confirm") {
        const { data: res } = await this.$http.get(
          "http://www.eshareedu.cn/edusystems/api/courses/delete",
          { params: { id: id } }
        );
        if (res.errCode == "10000") {
          this.$message.success("删除成功");
          this.courselist();
        } else {
          this.$message.error("删除失败");
        }
      }
    },
    //删除课程
    //修改
    courseedit(row) {
      // console.log(row);
     this.dialogFormVisiblea = true;
      this.editform.id = row.id;
      this.course.forEach((item) => {
        if (row.id == item.id) {
          this.editform.name = row.name;
          this.editform.pricetype = row.pricetype;
          this.editform.price = row.price;
          this.editform.mode = row.mode;
        }
      });
    },
    //修改
      // 课程修改
    async edit() {
      const { data: res } = await this.$http.post(
        "http://www.eshareedu.cn/edusystems/api/courses/add",
        this.editform
      );
      if (res.errCode == "10000") {
        this.$message.success("修改成功");
        this.courselist();
        this.dialogFormVisiblea = false;
      } else {
        this.$message.error("修改失败");
      }
    },
    // 课程修改
  },
};
</script>

<style lang="less" scoped>
.top {
  width: 100%;
  height: 55px;
  // background-color: aquamarine;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  //   box-shadow: 0px 3px 5px 3px red;
  margin-top: -10px;
  // border-bottom: 1px solid rgb(219, 219, 219);
  // border-top: 1px solid rgb(219, 219, 219);
  // border-left: 1px solid rgb(219, 219, 219);
  // border-right: 1px solid rgb(223, 223, 223);
  p {
    width: 117px;
    height: 55px;
    background-color: rgb(255, 255, 255);
    line-height: 55px;
    border-right: 1px solid rgb(216, 216, 216);
    // border-left: 1px solid rgb(212, 212, 212);
    // border-bottom: 1px solid rgb(212, 212, 212);
    // border-top: 1px solid rgb(212, 212, 212);
    text-align: center;
    font-weight: bold;
    font-size: 16px;
  }
  .button1 {
    font-size: 12px;
    height: 30px;
    margin-top: 12px;
    margin-left: 30px;
    // color: #9ea4b0;
  }
  .input-with-select {
    width: 400px;
    height: 30px;
    margin-top: 8px;
    margin-left: 10px;
  }
}

.box {
  //   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  margin-top: 20px;
  width: 1377.2px;
  height: 100%;
  background-color: rgb(255, 255, 255);
  .block {
    margin-top: 50px;
    margin-left: 300px;
  }
}
</style>
